<template>
    <div class='contentUi'>
        <span class="label">{{label}}</span>
        <div class="components">
            <el-input v-model="st_name" clearable maxlength = '8'></el-input>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
   export default {
    data() {
        return {
            label: '学生姓名',
            st_name:'',
        }
    },
    computed: {
        ...mapState({
            getStudent_name:state=>state.studentModule.student_name
        })
    },
    watch: {
        st_name(){
            this.setStudent_name(this.st_name);
        },
        getStudent_name(){
            //监听重置
            if(this.getStudent_name === ''){
                this.st_name = '';
            }
        }
    },
    methods: {
        ...mapMutations({
            setStudent_name:'studentModule/setStudent_name'
        }) 
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
